﻿<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                Photo Gallery albums
                <small>Page {{_page + 1}} of {{_pagesCount}}</small>
            </h1>
            <ol class="breadcrumb">
                <li>
                    <a [routerLink]="['/Home']">Home</a>
                </li>
                <li class="active">Albums</li>
            </ol>
        </div>
    </div>
    <!-- /.row -->
    <div class="row album-box" *ngFor="let album of _albums">
        <div class="col-md-1 text-center">
            <p>
                <i class="fa fa-camera fa-4x"></i>
            </p>
            <p>{{convertDateTime(album.DateCreated)}}</p>
        </div>
        <div class="col-md-5">
            <a class="fancybox" rel="gallery" href="{{album.Thumbnail}}" title="{{album.Title}}">
                <img class="media-object img-responsive album-thumbnail" src="{{album.Thumbnail}}" alt="" />
            </a>
        </div>
        <div class="col-md-6">
            <h3>
                <a [routerLink]="['/albums/:id/photos', {id: album.Id}]">{{album.Title}}</a>
            </h3>
            <p>
                Photos: <span class="badge">{{album.TotalPhotos}}</span>
            </p>
            <p>{{album.Description}}</p>
            <a *ngIf="album.TotalPhotos > 0" class="btn btn-primary" [routerLink]="['/albums/:id/photos', {id: album.Id}]">View photos <i class="fa fa-angle-right"></i></a>
        </div>
        <hr/>
    </div>
    <hr>
</div>

<footer class="navbar navbar-fixed-bottom">
    <div class="text-center">
        <div ng-hide="(!_pagesCount || _pagesCount < 2)" style="display:inline">
            <ul class="pagination pagination-sm">
                <li><a *ngIf="_page != 0_" (click)="search(0)"><<</a></li>
                <li><a *ngIf="_page != 0" (click)="search(_page-1)"><</a></li>
                <li *ngFor="let n of range()" [ngClass]="{active: n == _page}">
                    <a (click)="search(n)" *ngIf="n != _page">{{n+1}}</a>
                    <span *ngIf="n == _page">{{n+1}}</span>
                </li>
                <li><a *ngIf="_page != (_pagesCount - 1)" (click)="search(pagePlus(1))">></a></li>
                <li><a *ngIf="_page != (_pagesCount - 1)" (click)="search(_pagesCount - 1)">>></a></li>
            </ul>
        </div>
    </div>
</footer>
